<!DOCTYPE HTML>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta charset="utf-8">
<meta name="description" content="个人主页">
<meta name="author" content="Finalove">
<title>Finalove-Home</title>
<link rel="shortcut icon" href="/favicon.ico">
<link href="__CSS__/style.css" rel="stylesheet" type="text/css">
<link href="__CSS__/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="__CSS__/responsive.css" rel="stylesheet" type="text/css">
<link href="__ADMINCSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="__CSS__/effects/set2.css" rel="stylesheet" type="text/css">
<link href="__CSS__/effects/normalize.css" rel="stylesheet" type="text/css">
<link href="__CSS__/effects/component.css"  rel="stylesheet" type="text/css" >
<link href="__CSS__/finalove/style.css"  rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="__ADMINJS__/plugins/elementui/element-ui/lib/theme-chalk/index.css">
{block name="style"}{/block}
</head>
<body>

<!-- start of header -->
<header role="header">
  <div class="container">
    <!-- logo -->
	<h1>
	<a href="{:url('index/index')}" title="This is Logo">
		<img class="header_logo" width="220" height="60" src="__IMG__/logo.png" title="This is Logo" alt="This is Logo"/>
		<img class="header_mini_logo" width="70" height="60" src="__IMG__/logo.png" title="This is Logo" alt="This is Logo"/>
	</a>
	</h1>
    <!-- logo -->

	<!-- login -->
	<div id="loginBox" style="position: absolute;top: 13px;right: 75px;">
		{if session("visitor_id")}
			<el-popover width="100" trigger="hover" @show="changeVerifyCode">
				<div id="visitorPopover">
				<ul>
					<img src="{:session('visitor_head')}" width="50" height="50">
					<li>
						<a href="{:url('index/visitor/index')}">
							个人中心
						</a>
					</li>
					<li><a href="{:url('index/login/logout')}">安全退出</a></li>
				</ul>
				</div>
				<el-button slot="reference" type="primary" plain size="small">{:session("visitor_nick_name")}</el-button>
			</el-popover>
		{else}
		<el-popover width="350" trigger="click" @show="changeVerifyCode">
			<div>
				<el-tabs stretch>
					<el-tab-pane label="登录">
						<el-form>
							<el-form-item>
								<el-input v-model="loginForm.user_name" placeholder="用户名"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="loginForm.passwd" type="password" placeholder="密码"></el-input>
							</el-form-item>
							<el-row>
								<el-form-item class="verifyCode">
									<el-input v-model="loginForm.code" placeholder="验证码"></el-input>
								</el-form-item>
								<el-form-item class="verifyCodeImg">
									<img width="140" :src="VerifyImgSrc" @click="changeVerifyCode"/>
								</el-form-item>
							</el-row>
						</el-form><br>
						<div class="text-center">
							<el-button type="primary" size="mini" @click="subLogin">登录</el-button>
							<el-button size="text" @click="changeVerifyCode">看不清，换一张</el-button>
						</div>
					</el-tab-pane>
					<el-tab-pane label="注册">
						<el-form>
							<el-form-item>
								<el-input v-model="regForm.user_name" placeholder="用户名"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="regForm.passwd" type="password" placeholder="密码"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="regForm.repasswd" type="password" placeholder="确认密码">
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="regForm.email" placeholder="邮箱"></el-input>
							</el-form-item>
							<el-row>
								<el-form-item class="verifyCode">
									<el-input v-model="regForm.code" placeholder="验证码"></el-input>
								</el-form-item>
								<el-form-item class="verifyCodeImg">
									<img width="140" :src="VerifyImgSrc" @click="changeVerifyCode"/>
								</el-form-item>
							</el-row>
							<div class="text-center">
								<el-button size="text" @click="sendEmailCode">获取邮箱验证码</el-button>
								<el-button size="text" @click="changeVerifyCode">看不清，换一张</el-button>
							</div>
							<el-form-item>
								<el-input v-model="regForm.email_code" placeholder="邮箱验证码"></el-input>
							</el-form-item>
						</el-form>
						<div class="text-center">
							<el-button type="primary" size="mini" @click="subReg">确认注册</el-button>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
			<el-button slot="reference" type="primary" plain size="small">Login</el-button>
		</el-popover>
		{/if}
	</div>
	<!-- login -->

    <!-- nav -->
    <nav role="header-nav" class="navy">
      <ul>
		{volist name="Nav" id="v"}
		{if condition="mb_strtolower(request()->path()) == $v.src"}
			<li class="nav-active">
		{else}
			<li>
		{/if}
			<a href="{:url($v.src)}" title="{$v.title|default=''}">{$v.name|default=''}</a>
		</li>
		{/volist}
      </ul>
    </nav>
    <!-- nav -->
  </div>
</header>
<!-- end of header -->

<!-- start of main -->
{block name="content"}{/block}
<!-- end of main -->

<!-- start of footer -->
<footer role="footer">

  <!-- logo -->
	<a href="{:url('index/index')}">
		<img width="220" height="60" src="__IMG__/logo.png" title="This is Logo" alt="This is Logo" style="margin:0 auto;"/>
	</a>
  <!-- logo -->

  <!-- nav -->

  <nav role="footer-nav">
    <ul>
		{volist name="Nav" id="v"}
		<li>
			<a href="{:url($v.src)}" title="{$v.title|default=''}">{$v.name|default=''}</a>
		</li>
		{/volist}
    </ul>
  </nav>

  <!-- nav -->

  <ul role="social-icons">
    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
    <li><a href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a></li>
  </ul>
  <p class="copy-right">&copy; {:date("Y")}  Finalove All rights Resved</p>
</footer>
<!-- end of footer -->
<script src="__ADMINJS__/jquery.min.js" type="text/javascript"></script>
<script src="__JS__/nav.js" type="text/javascript"></script>
<script src="__JS__/custom.js" type="text/javascript"></script>
<script src="__JS__/bootstrap.min.js" type="text/javascript"></script>
<script src="__JS__/effects/masonry.pkgd.min.js"  type="text/javascript"></script>
<script src="__JS__/effects/imagesloaded.js"  type="text/javascript"></script>
<script src="__JS__/effects/classie.js"  type="text/javascript"></script>
<script src="__JS__/effects/AnimOnScroll.js"  type="text/javascript"></script>
<script src="__JS__/effects/modernizr.custom.js"></script>
<script src="__JS__/html5shiv.js" type="text/javascript"></script>
<script src="__JS__/finalove.js" type="text/javascript"></script>
<script src="__ADMINJS__/plugins/elementui/vue/vue.js"></script>
<script src="__ADMINJS__/plugins/elementui/element-ui/lib/index.js"></script>
<script type="text/javascript">
var loginBox = new Vue({
	el:"#loginBox",
	data:{
		VerifyImgSrc:"{:url('index/Login/checkVerify')}",
		loginForm:{
			user_name:"",
			passwd:"",
			code:""
		},
		regForm:{
			user_name:"",
			passwd:"",
			repasswd:"",
			email:"",
			code:"",
			email_code:""
		}
	},
	methods:{
		changeVerifyCode() {
			this.VerifyImgSrc='{:url('index/Login/checkVerify')}?tm='+Math.random();
		},
		sendEmailCode() {
			if(!this.checkEmail()){
				return false;
			}
			if(this.regForm.code.length != 4){
				this.$message.error('图片验证码错误');
				return false;
			}
			var param = {
				email:this.regForm.email,
				code:this.regForm.code
			}
			$.post("{:url('index/login/sendEmailCode')}",param,function(res){
				loginBox.ajaxRes(res);
			})
		},
		ajaxRes(res){
			if(res.code == 1){
				this.$message.success(res.msg);
			}else{
				this.$message.error(res.msg);
			}
		},
		subLogin() {
			var param = this.loginForm;
			$.post("{:url('index/login/doLogin')}",param,function(res) {
				loginBox.ajaxRes(res);
				if(res.code != 1){
					loginBox.changeVerifyCode();
				}else{
					window.location.href = "{:url('index/index/index')}";
				}
			});
		},
		subReg() {
			if(!this.checkEmail()){
				return false;
			}
			if(this.regForm.passwd.length < 6){
				this.$message.error('密码至少为6位');
				return false;
			}
			if(this.regForm.passwd != this.regForm.repasswd){
				this.$message.error('密码两次输入不一致');
				return false;
			}
			if(this.regForm.email_code.length < 6){
				this.$message.error('邮箱验证码错误');
				return false;
			}
			var param = this.regForm;
			$.post("{:url('index/login/VisitorReg')}",param,function(res) {
				if(res.code == 1){
					loginBox.$alert('恭喜您，注册成功', '成功', {
						confirmButtonText: '确定',
						callback: action => {
							window.location.href = "{:url('index/index/index')}";
						}
					});
				}else{
					loginBox.$message.error(res.msg);
				}
			});
		},
		checkEmail() {
			var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
			var res = reg.test(this.regForm.email);
			if(!res){
				this.$message.error('邮箱格式不合法');
				return false;
			}else{
				return true;
			}
		}
	}
})
</script>
{block name="script"}{/block}
</body>
</html>
